<template>
    <div class="overview-box">
        <div class="picker-box">
            <div>
                <topTitle :title="navTitle"/>
                <div class="serverType-tab">
                    <p :class="['tab-item', serverType == 1 ? 'checked' : '']" @click="tabChange(1)">微信</p>
                    <p :class="['tab-item', serverType == 2 ? 'checked' : '']" @click="tabChange(2)">QQ</p>
                </div>
            </div>
            <el-date-picker
                v-model="ymd"
                :clearable="false"
                type="date"
                align="right"
                unlink-panels
                :picker-options="pickerOptions"
                @change="dateChange">
            </el-date-picker>
        </div>
        <section id="legendaryDetailEcharts"></section>
    </div>
</template>

<script>
import echarts from 'echarts'
import { formatDate } from '@/utils/utils'
import { getEchartsSeries } from '@/assets/js/quTeam'

export default {
    data () {
        return {
            pageNum: 1,
            pageSize: 10,
            ymd: this.$route.query.date + ' 00:00:00',
            navTitle: `${this.$route.query.date} 数据详情`,
            serverType: 1,
            echartsTitle: {
                '大神功能日活': true,
                '大神日活': false,
                '创建房间': false,
                '有效房间': false,
                '付费成功次数': false,
                '进入房间成员': false,
                '付费用户': false,
                '接单大神': false,
                '对局数': false,
                '大神平均接单数': false,
                '付费用户平均付费数': false,
                '大神邀请用户': false,
                '用户邀请用户': false,
                'GMV': false
            },
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < new Date('2020-09-20 00:00:00').getTime()
                }
            }
        }
    },
    mounted () {
        this.creatEcharts()
        this.getEchartsData()
    },
    methods: {
        getEchartsData () {
            let params = {
                pageNum: 1,
                pageSize: 999,
                ymd: this.ymd,
                serverType: this.serverType
            }
            this.$http.get('/team/getReportTeamKingDataDetail', {
                params
            }).then(res => {
                if (res.code === '0') {
                    if (res.data.length > 0) {
                        // let reverseData = res.data
                        // reverseData.map(item => {
                        //     item.ymd = formatDate(item.ymd, 'YYYY-MM-DD')
                        // })
                        this.echartsData = res.data
                        this.setEcharts()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '无数据'
                        })
                    }
                }
            })
        },
        setEcharts () {
            let XTimeList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
            let myChart = echarts.init(document.getElementById('legendaryDetailEcharts'))
            let option = {
                xAxis: {
                    data: XTimeList
                },
                series: getEchartsSeries(this.echartsData, 'legendary')
            }
            console.log(321, option)
            myChart.setOption(option)
        },
        creatEcharts () {
            let myChart = echarts.init(document.getElementById('legendaryDetailEcharts'))
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: Object.keys(this.echartsTitle),
                    selected: this.echartsTitle,
                    type: 'scroll'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            }
            console.log(123, option)
            myChart.setOption(option)
        },
        tabChange (val) {
            if (val === this.serverType) return
            this.serverType = val
            this.getEchartsData()
        },
        dateChange (val) {
            this.ymd = formatDate(new Date(val), 'YYYY-MM-DD') + ' 00:00:00'
            this.navTitle = `${formatDate(new Date(val), 'YYYY-MM-DD')} 数据详情`
            this.getEchartsData()
        },
        tableFormatDate (time) {
            return formatDate(time, 'YYYY-MM-DD')
        }
    }
}
</script>

<style lang="scss">
    .overview-box {
        padding-top: 20px;

        .picker-box {
            display: flex;
            justify-content: space-between;
            .serverType-tab {
                display: flex;
                width: 100px;
                align-items: center;
                justify-content: space-around;
                .tab-item {
                    font-size: 14px;
                    color: #393939;
                    cursor: pointer;
                }
                .checked {
                    position: relative;
                    font-weight: 500;
                    &::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -5px;
                        width: 10px;
                        height: 2px;
                        margin-left: -5px;
                        background-color: #0081ff;
                    }
                }
            }
            /deep/.el-input__icon {
                height: initial;
            }
        }
        #legendaryDetailEcharts {
            height: 400px;
            margin-top: 20px;
        }
    }
</style>
